{extend name="platform/new_base" /}
{block name="resources"/}
{/block}
{block name="main"}
                <!-- page -->
                <!--<form action="" class="form">
                    <div class="v-form-inline">
                        <div class="form-group">
                            <label class="control-label">店铺类型</label>
                            <select class="form-control" id="shop_type">
                                <option value="">全部</option>
                                <option value="1">自营店</option>
                                {if $shopStatus}
                                <option value="2">入驻店</option>
                                {/if}
                            </select>
                        </div>
                        <div class="form-group date-form-group">
                            <label class="control-label">下单时间</label>
                            <div class="date-input-group" >
                                <div class="date-input-control">
                                    <input type="text" class="form-control" id="startDate" placeholder="开始时间" value="{$start_date}"><i class="icon icon-calendar"></i>
                                </div>
                                <span class="date-input-group-addon">~</span>
                                <div class="date-input-control">
                                    <input type="text" class="form-control" id="endDate" placeholder="结束时间" value="{$end_date}"><i class="icon icon-calendar"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="v-form-inline">
                        <div class="form-group">
                            <label class="control-label">地区</label>
                            <select class="form-control"  name="province" id="seleAreaNext" style="margin-right: 10px;">
                                <option value="">省级</option>
                            </select>
                            <select class="form-control"  name="city" id="seleAreaThird" >
                                <option value="">市级</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <a class="btn btn-primary search"><i class="icon icon-search"></i> 搜索</a>
                        </div>
                    </div>
                </form>-->
<form class="v-filter-container">
    <div class="filter-fields-wrap">
        <div class="filter-item clearfix">
            <div class="filter-item__field">
                <div class="v__control-group">
                    <label class="v__control-label">店铺类型</label>
                    <div class="v__controls">
                        <select class="v__control_input" id="shop_type">
                            <option value="">全部</option>
                            <option value="1">自营店</option>
                            <option value="2">入驻店</option>
                        </select>
                    </div>
                </div>
                <div class="v__control-group">
                    <label class="v__control-label">下单时间</label>
                    <div class="v__controls v-date-input-control">
                        <label for="orderTime">
                            <input type="text" class="v__control_input pr-30" id="orderTime" placeholder="请选择时间" autocomplete="off" data-types="datetime">
                            <i class="icon icon-calendar"></i>
                            <input type="hidden" id="startDate">
                            <input type="hidden" id="endDate">
                        </label>
                    </div>
                </div>
                <div class="v__control-group">
                    <label class="v__control-label">地区</label>
                    <div class="v__controls">
                        <select class="v__control_input"  name="province" id="seleAreaNext" style="margin-right: 10px;display: inline-block">
                            <option value="">省级</option>
                        </select>
                        <select class="v__control_input"  name="city" id="seleAreaThird" style="display: inline-block">
                            <option value="">市级</option>
                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="filter-item clearfix">
            <div class="filter-item__field">
                <div class="v__control-group">
                    <label class="v__control-label"></label>
                    <div class="v__controls">
                        <a class="btn btn-primary search"><i class="icon icon-search"></i> 搜索</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

                <div class="screen-title">
                    <span class="text">订单情况</span>
                </div>
                <div class="h-500 pt-15" id="situation"></div>
                <div class="screen-title"><span class="text">端口分布</span></div>
                <div class="index_tables row">
                    <div class="col-sm-6">
                        <div id="port_distribution" style="height: 400px"></div>
                    </div>
                    <div class="col-sm-6">
                        <table class="table table-hover v-table table-auto-center">
                            <thead>
                                <tr>
                                    <th>端口</th>
                                    <th>成交订单（笔）</th>
                                    <th>成交金额（元）</th>
                                    <th>成交会员（人）</th>
                                </tr>
                            </thead>
                            <tbody id="port_list">

                            </tbody>
                        </table>
                    </div>
                    
                </div>
                <div class="screen-title">
                    <span class="text">地区分布</span>
                </div>
                <div class="h-500 pt-15" id="order"></div>
                <div class="area-table">
                    <table class="table table-hover v-table table-auto-center">
                        <thead>
                            <tr>
                                <th>地区</th>
                                <th>成交订单（笔）</th>
                                <th>成交金额（元）</th>
                                <th>成交会员（人）</th>
                            </tr>
                        </thead>
                        <tbody id="area_list">

                        </tbody>
                    </table>
                </div>
                <!-- page end -->
{/block}
{block name="script"}
<script>
require(['util'],function(util){
    $(function(){
        // echart模板
        showCharts();
        // util.layDate('#startDate');
        // util.layDate('#endDate');
    util.layDate('#orderTime',true,function(value, date, endDate){
        var h=date.hours<10 ?"0"+date.hours : date.hours;
        var m=date.minutes<10 ?"0"+date.minutes : date.minutes;
        var s=date.seconds<10 ?"0"+date.seconds : date.seconds;
        var h1=endDate.hours<10 ?"0"+endDate.hours : endDate.hours;
        var m1=endDate.minutes<10 ?"0"+endDate.minutes : endDate.minutes;
        var s1=endDate.seconds<10 ?"0"+endDate.seconds : endDate.seconds;
        var date1=date.year+'-'+date.month+'-'+date.date+' '+h+":"+m+":"+s;
        var date2=endDate.year+'-'+endDate.month+'-'+endDate.date+' '+h1+":"+m1+":"+s1;

        if(value){
            $('#startDate').val(date1);
            $('#endDate').val(date2);
        }
        else{
            $('#startDate').val('');
            $('#endDate').val('');
        }

    });
        var selCity = $("#seleAreaNext")[0];
        for (var i = selCity.length - 1; i >= 0; i--) {
            selCity.options[i] = null;
        }
        var opt = new Option("省级", "");
        selCity.options.add(opt);
        //alert(selCity);
        // 添加省
        $.ajax({
            type: "post",
            url: "{:__URL('PLATFORM_MAIN/order/getProvince')}",
            dataType: "json",
            success: function (data) {
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var opt = new Option(data[i].province_name,
                            data[i].province_id);
                        selCity.options.add(opt);
                    }
                    if (typeof ($("#provinceid").val()) != 'undefined') {
                        $("#seleAreaNext").val($("#provinceid").val());
                        GetProvince();
                        $("#provinceid").val('');
                    }
                }
            }
        });
    });
    function showCharts() {
        $.ajax({
            type : "post",
            url : "{:__URL('PLATFORM_MAIN/statistics/orderDistribution')}",
            async : true,
            data:{"start_date":$("#startDate").val(),"end_date":$("#endDate").val(),"shop_type":$("#shop_type").val(),"province":$("#seleAreaNext").val(),"city":$("#seleAreaThird").val()},
            success : function(dataInfo) {
                var option1 = {
                    title : {
                        text: '订单来源',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['PC端','wap端','app端','微信端']
                    },
                    series : [
                        {
                            name: '订单来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:dataInfo['order_from3'], name:'PC端'},
                                {value:dataInfo['order_from2'], name:'wap端'},
                                {value:dataInfo['order_from5'], name:'app端'},
                                {value:dataInfo['order_from1'], name:'微信端'},
                                // {value:dataInfo['order_from6'], name:'小程序端'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                util.chart('port_distribution',option1)
                var html = '';
                html += '<tr>';
                html += '<td>pc端</td>';
                html += '<td>'+dataInfo['order_from3']+'</td>';
                html += '<td>'+dataInfo['order_from3_money']+'</td>';
                html += '<td>'+dataInfo['order_from3_member']+'</td>';
                html += '</tr>';
                html += '<tr>';
                html += '<td>app端</td>';
                html += '<td>'+dataInfo['order_from5']+'</td>';
                html += '<td>'+dataInfo['order_from5_money']+'</td>';
                html += '<td>'+dataInfo['order_from5_member']+'</td>';
                html += '</tr>';
                html += '<tr>';
                html += '<td>wap端</td>';
                html += '<td>'+dataInfo['order_from2']+'</td>';
                html += '<td>'+dataInfo['order_from2_money']+'</td>';
                html += '<td>'+dataInfo['order_from2_member']+'</td>';
                html += '</tr>';
                html += '<tr>';
                html += '<td>微信端</td>';
                html += '<td>'+dataInfo['order_from1']+'</td>';
                html += '<td>'+dataInfo['order_from1_money']+'</td>';
                html += '<td>'+dataInfo['order_from1_member']+'</td>';
                html += '</tr>';
                // html += '<tr>';
                // html += '<td>小程序端</td>';
                // html += '<td>'+dataInfo['order_from6']+'</td>';
                // html += '<td>'+dataInfo['order_from6_money']+'</td>';
                // html += '<td>'+dataInfo['order_from6_member']+'</td>';
                // html += '</tr>';
                $("#port_list").html(html);
                if(dataInfo["area_info"]){
                    var option = {
                        // xAxis: {
                        //     type: 'category',
                        //     data: dataInfo["area_info"]["areas"]
                        // },
                        // yAxis: {
                        //     type: 'value',
                        //     name:'数量'
                        // },
                        // series: [{
                        //     data: dataInfo["area_info"]["counts"],
                        //     type: 'bar',
                        // }]
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : dataInfo["area_info"]["areas"],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name:'数量'
                            }
                        ],
                        series : [
                            {   
                                name:'数量',
                                type:'bar',
                                barWidth: '60%',
                                data:dataInfo["area_info"]["counts"]
                            }
                        ]
                    };
                    util.chart('order',option)
                    var html1='';
                    for (var i = 0; i < dataInfo["area_info"]['areas'].length; i++) {
                        html1 += '<tr>';
                        html1 += '<td>' + dataInfo["area_info"]['areas'][i] + '</td>';
                        html1 += '<td>' + dataInfo["area_info"]['counts'][i]+ '</div></td>';
                        html1 += '<td>' + dataInfo["area_info"]['order_from_money'][i] + '</td>';
                        html1 += '<td>' + dataInfo["area_info"]['order_from_member'][i] + '</td>';
                        html1 += '</tr>';
                    }
                    $("#area_list").html(html1);
                }else{
                    var city_name = '';
                    var pro_name = '';
                    if($("#seleAreaThird").val()>0){
                        city_name = $("#seleAreaThird option:selected").text();
                    }
                    if($("#seleAreaNext").val()>0) {
                        pro_name = $("#seleAreaNext option:selected").text();
                    }
                    var name = [];
                    if(city_name){
                        name = [city_name];
                    }else{
                        name = [pro_name];
                    }
                    var option = option = {
                        xAxis: {
                            type: 'category',
                            data: name
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [0],
                            type: 'bar'
                        }]
                    };
                    util.chart('order',option)
                    var html2='';
                    html2 += '<tr><td colspan="6" class="h-200">暂无符合条件的数据记录</td></tr>';
                    $("#area_list").html(html2);
                }

            }
        });


    }
    loading();
    function loading(){
        $.ajax({
            type : "post",
            url : "{:__URL('PLATFORM_MAIN/statistics/orderProfile')}",
            async : true,
            data:{"start_date":$("#startDate").val(),"end_date":$("#endDate").val(),"shop_type":$("#shop_type").val(),"province":$("#seleAreaNext").val(),"city":$("#seleAreaThird").val()},
            success : function(data) {
                var option2 = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['订单量','付款订单','售后订单']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data[0]
                    },
                    yAxis: {
                        type: 'value',
                        name:'数量',
                    },
                    series: [
                        {
                            name:'订单量',
                            type:'line',
                            // stack: '总量',
                            data:data[1][0]['data']
                        },
                        {
                            name:'付款订单',
                            type:'line',
                            // stack: '总量',
                            data:data[1][1]['data']
                        },
                        {
                            name:'售后订单',
                            type:'line',
                            // stack: '总量',
                            data:data[1][2]['data']
                        }
                    ]
                };
                util.chart('situation',option2)
            }
        });
    }
    //选择省份弹出市区
    $('#seleAreaNext').on('change',function(){
        var id = $("#seleAreaNext").find("option:selected").val();
        var selCity = $("#seleAreaThird")[0];
        for (var i = selCity.length - 1; i >= 0; i--) {
            selCity.options[i] = null;
        }
        var opt = new Option("市级", "");
        selCity.options.add(opt);
        $.ajax({
            type: "post",
            url: "{:__URL('PLATFORM_MAIN/order/getCity')}",
            dataType: "json",
            data: {
                "province_id": id
            },
            success: function (data) {
                if (data != null && data.length > 0) {
                    for (var i = 0; i < data.length; i++) {
                        var opt = new Option(data[i].city_name, data[i].city_id);
                        selCity.options.add(opt);
                    }
                    if (typeof ($("#cityid").val()) != 'undefined') {
                        $("#seleAreaThird").val($("#cityid").val());
                        getSelCity();
                        $("#cityid").val('');
                    }
                }
            }
        });
    })
    $('.search').on('click',function(){
        showCharts();
        loading();
    })
})
</script>
{/block}